<template>
  <div id="content">
    <!-- 顶部大图展示区 -->
    <div class="hero-section">
      <el-carousel 
        :interval="5000" 
        height="90vh"
        :autoplay="true"
        indicator-position="none"
        class="hero-carousel"
        @change="handleSlideChange">
        <el-carousel-item v-for="(slide, index) in heroSlides" :key="index">
          <div class="slide-wrapper">
            <div class="slide-image" 
                 :style="{ backgroundImage: `url(${slide.url})` }"
                 :class="{ 'zoom-effect': currentSlide === index }">
            </div>
            <div class="slide-overlay"></div>
            <div class="slide-content" :class="[slide.position, { 'active': currentSlide === index }]">
              <div class="content-wrapper">
                <h1 class="hero-title">{{ slide.title }}</h1>
                <p class="hero-subtitle">{{ slide.description }}</p>
                <div class="hero-buttons" v-if="slide.showButtons">
                  <button class="hero-btn join-btn" @click="showQRCode">
                    <span class="btn-content">加入我们</span>
                    <span class="btn-glitch"></span>
                    <span class="btn-label">JOIN US</span>
                  </button>
                  <button class="hero-btn more-btn" @click="goToAssociation">
                    <span class="btn-content">了解更多</span>
                    <span class="btn-glitch"></span>
                    <span class="btn-label">LEARN MORE</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 自定义指示器 -->
      <div class="custom-indicators">
        <span 
          v-for="(_, index) in heroSlides" 
          :key="index"
          :class="['indicator', { 'active': currentSlide === index }]"
          @click="setSlide(index)">
        </span>
      </div>

      <!-- 自定义切换按钮 -->
      <div class="custom-arrows">
        <button class="arrow-btn prev" @click="prevSlide">
          <i class="el-icon-arrow-left"></i>
        </button>
        <button class="arrow-btn next" @click="nextSlide">
          <i class="el-icon-arrow-right"></i>
        </button>
      </div>
    </div>

    <!-- 协会简介 -->
    <div class="features-section animate-fade-up">
      <h2 class="section-title">协会特色</h2>
      <div class="features-grid">
        <div class="feature-card">
          <i class="el-icon-monitor"></i>
          <h3>技术培训</h3>
          <p>定期开展编程培训，助力技术成长</p>
        </div>
        <div class="feature-card">
          <i class="el-icon-data-analysis"></i>
          <h3>项目实践</h3>
          <p>真实项目经验，提升实战能力</p>
        </div>
        <div class="feature-card">
          <i class="el-icon-connection"></i>
          <h3>资源共享</h3>
          <p>丰富的学习资源，技术资料共享</p>
        </div>
        <div class="feature-card">
          <i class="el-icon-user"></i>
          <h3>技术交流</h3>
          <p>同好交流平台，分享技术心得</p>
        </div>
      </div>
    </div>

    <!-- 轮播图和公告区域 -->
    <div class="content-section">
      <div class="section-grid">
        <!-- 最新活动 -->
        <div class="news-section">
          <h2 class="section-title">最新活动</h2>
          <div class="carousel-container">
            <el-carousel 
              :interval="4000" 
              type="card" 
              height="300px"
              :autoplay="true"
              indicator-position="none">
              <el-carousel-item v-for="(item, index) in activities" :key="index" v-if="item.code==0">
                <div class="carousel-card" 
                    :class="{ 'is-active': currentIndex === index }">
                  <div class="img-wrapper">
                    <img :src="item.url" class="carousel-img">
                    <div class="card-overlay"></div>
                    <div class="card-content">
                      <h3>{{ item.title || '活动标题' }}</h3>
                      <p>{{ item.description || '活动描述' }}</p>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="carousel-indicators">
              <span v-for="(_, i) in activities" 
                    :key="i" 
                    :class="['indicator', { active: currentIndex === i }]"
                    @click="setCurrentIndex(i)">
              </span>
            </div>
          </div>
        </div>

        <!-- 最新公告 -->
        <div class="announcement-section">
          <h2 class="section-title">最新公告</h2>
          <div class="announcement-list">
            <div v-for="notice in notices" 
                 :key="notice.id" 
                 class="notice-card"
                 @mouseenter="notice.isHovered = true"
                 @mouseleave="notice.isHovered = false">
              <div class="notice-date">{{ notice.date }}</div>
              <div class="notice-content">
                <h4>{{ notice.title }}</h4>
                <p>{{ notice.content }}</p>
              </div>
              <div class="notice-indicator"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 活动日程 -->
    <div class="schedule-section animate-fade-up">
      <h2 class="section-title">近期活动</h2>
      <div class="schedule-grid">
        <div class="schedule-card" v-for="event in events" :key="event.id">
          <div class="event-date">{{ event.date }}</div>
          <div class="event-details">
            <h4>{{ event.title }}</h4>
            <p>{{ event.description }}</p>
            <span class="event-location">
              <i class="el-icon-location"></i> {{ event.location }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 资源下载区 -->
    <div class="resources-section">
      <div class="resource-content">
        <div class="resource-card">
          <div class="resource-icon-wrapper">
            <i class="el-icon-download resource-icon"></i>
            <div class="icon-ring"></div>
          </div>
          <h2 class="resource-title">软件资源共享</h2>
          <p class="resource-subtitle">点击访问计算机协会FTP资源库</p>
          <a href="http://ca.seig.edu.cn:666" target="_blank" class="resource-btn">
            <span class="btn-text">访问资源库</span>
            <i class="el-icon-download"></i>
          </a>
        </div>
      </div>
      <div class="tech-circles">
        <div class="circle c1"></div>
        <div class="circle c2"></div>
        <div class="circle c3"></div>
      </div>
      <div class="tech-grid"></div>
    </div>

    <!-- 二维码模态框 -->
    <div class="modal" v-if="showModal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <img src="../../assets/imgs/gzh.jpg" alt="公众号二维码">
        <div class="modal-close" @click="closeModal">&times;</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      currentSlide: 0,
      heroSlides: [
        {
          url: require('@/assets/imgs/bgm2.png'),
          title: '计算机协会',
          description: '探索技术的无限可能',
          position: 'center',
          showButtons: true
        },
        {
          url: require('@/assets/imgs/ca1.jpg'),
          title: '全院维护',
          description: '电脑义修，服务全校师生',
          position: 'left'
        },
        {
          url: require('@/assets/imgs/ca2.jpg'),
          title: 'ACM程序设计大赛',
          description: '2025ACM程序设计大赛等你来挑战！',
          position: 'right'
        }
      ],
      activities: [],
      currentIndex: 0,
      notices: [
        { 
          id: 1, 
          title: '春季招新开始',
          content: '2025春季招新正式开始，欢迎加入我们的大家庭！',
          date: '2025-03-15'
        },
        { 
          id: 2, 
          title: '技术培训通知',
          content: 'Web全栈开发实战技术分享即将开始，请报名的同学准时参加。',
          date: '2025-03-12'
        },
        { 
          id: 3, 
          title: 'ACM程序设计大赛',
          content: 'ACM程序设计大赛决赛即将举行，欢迎有兴趣的同学报名参与。',
          date: '2025-03-10'
        }
      ],
      
      showModal: false
    }
  },
  methods: {
    handleSlideChange(index) {
      this.currentSlide = index;
    },
    setSlide(index) {
      this.$refs.carousel.setActiveItem(index);
    },
    prevSlide() {
      this.$refs.carousel.prev();
    },
    nextSlide() {
      this.$refs.carousel.next();
    },
    showQRCode() {
      this.showModal = true;
      document.body.style.overflow = 'hidden'; // 防止背景滚动
    },
    closeModal() {
      this.showModal = false;
      document.body.style.overflow = 'auto';
    },
    goToAssociation() {
      this.$router.push('/front/association');
    },
    async fetchActivities() {
      try {
        const response = await this.$request.get('/activity/all')
        this.activities = response.data 
        this.events = response.data
       
      } catch (error) {
        console.error('获取活动数据失败:', error)
      }
    },
    handleActivityClick(activity) {
      window.open('http://ca.seig.edu.cn:666', '_blank')
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    setCurrentIndex(index) {
      this.currentIndex = index;
    }
  },
  created() {
    this.fetchActivities()
  }
}
</script>

<style scoped>
#content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 90vh;
  min-height: 800px;
  overflow: hidden;
}

.hero-carousel {
  height: 100%;
}

.slide-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 7s ease;
}

.zoom-effect {
  transform: scale(1.1);
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.4)
  );
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1200px;
  text-align: center;
  padding: 0 20px;
  z-index: 2;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-title {
  font-size: 4em;
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  transform: translateY(30px);
  opacity: 0;
  animation: slideUp 0.8s forwards 0.3s;
}

.hero-subtitle {
  font-size: 1.5em;
  color: white;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  transform: translateY(30px);
  opacity: 0;
  animation: slideUp 0.8s forwards 0.5s;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  transform: translateY(30px);
  opacity: 0;
  animation: slideUp 0.8s forwards 0.7s;
}

.hero-btn {
  position: relative;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

.btn-content {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform 0.3s ease;
}

.btn-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-transform: uppercase;
}

.hero-btn:hover .btn-content {
  transform: translateY(-10px);
}

.hero-btn:hover .btn-label {
  bottom: 4px;
  opacity: 0.7;
}

/* 加入我们按钮 */
.join-btn {
  background: linear-gradient(45deg, #318df7, #63a4ff);
  color: white;
  box-shadow: 0 4px 15px rgba(49, 141, 247, 0.2);
}

.join-btn:hover {
  box-shadow: 0 8px 25px rgba(49, 141, 247, 0.4);
  transform: translateY(-2px);
}

.join-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.join-btn:hover::before {
  left: 100%;
}

/* 了解更多按钮 */
.more-btn {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-2px);
}

/* 按钮故障效果 */
.btn-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  display: none;
}

.hero-btn:hover .btn-glitch {
  display: block;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

/* 自定义指示器 */
.custom-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}

.indicator {
  width: 30px;
  height: 4px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #fff;
  width: 50px;
}

/* 自定义箭头 */
.custom-arrows {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
}

.arrow-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-50%) scale(1.1);
}

.arrow-btn.prev {
  left: 20px;
}

.arrow-btn.next {
  right: 20px;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .hero-title {
    font-size: 2.5em;
  }
  
  .hero-subtitle {
    font-size: 1.2em;
  }
  
  .arrow-btn {
    width: 40px;
    height: 40px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
  }

  .content-wrapper {
    gap: 15px;
  }

  .hero-btn {
    width: 200px;
    padding: 14px 28px;
    font-size: 14px;
  }

  .btn-label {
    font-size: 10px;
  }
}

/* Features Section */
.features-section {
  padding: 80px 5%;
  background: #f8f9fa;
}

.section-title {
  text-align: center;
  font-size: 2.5em;
  color: #2c3e50;
  margin-bottom: 50px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 0 5%;
}

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.feature-card i {
  font-size: 3em;
  color: #318df7;
  margin-bottom: 20px;
}

/* Main Content */
.main-content {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  padding: 80px 5%;
}

.carousel-card {
  position: relative;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
}

.announcement-list {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.notice-card {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.notice-card:hover {
  background: #f8f9fa;
  transform: translateX(5px);
}

.notice-date {
  min-width: 100px;
  color: #666;
}

/* Schedule Section */
.schedule-section {
  padding: 80px 5%;
  background: #f8f9fa;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.schedule-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.schedule-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.event-date {
  color: #318df7;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.event-location {
  color: #666;
  font-size: 0.9em;
}

/* Resources Section Styles */
.resources-section {
  position: relative;
  min-height: 50px;
  background: linear-gradient(135deg, #0a2463 0%, #1e4bd2 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.resource-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.resource-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.resource-icon-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
}

.resource-icon {
  position: relative;
  z-index: 2;
  font-size: 2.5em;
  color: #fff;
  animation: float 3s ease-in-out infinite;
}

.icon-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.icon-ring::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite 1s;
}

.resource-title {
  color: #fff;
  font-size: 1.8em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.resource-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1em;
  margin-bottom: 2rem;
}

.resource-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 2rem;
  background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.resource-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #00f2fe 0%, #4facfe 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.resource-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.resource-btn:hover::before {
  opacity: 1;
}

.btn-text {
  position: relative;
  z-index: 1;
}

/* Background Effects */
.tech-circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(79, 172, 254, 0.1), rgba(0, 242, 254, 0.1));
  animation: moveAround 20s linear infinite;
}

.c1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation-delay: -5s;
}

.c2 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  right: -200px;
  animation-delay: -10s;
}

.c3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  animation-delay: -15s;
}

.tech-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: gridMove 20s linear infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes moveAround {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

@keyframes gridMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(30px); }
}

.animate-fade-up {
  animation: fadeUpIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .modal-content {
    max-width: 90%;
  }

  .modal-close {
    top: -30px;
    right: -10px;
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .primary-btn, .secondary-btn {
    width: 100%;
    max-width: 250px;
  }
}

.news-section {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.carousel-card {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  background: white;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.img-wrapper {
  position: relative;
  height: 60%;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-wrapper:hover .overlay {
  opacity: 1;
}

.img-wrapper:hover .carousel-img {
  transform: scale(1.1);
}

.view-btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 25px;
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border: none;
  color: white;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.img-wrapper:hover .view-btn {
  transform: translateY(0);
}

.carousel-content {
  padding: 1.5rem;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.carousel-content h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
}

.carousel-content p {
  margin: 0.5rem 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.carousel-content .date {
  color: #999;
  font-size: 0.8rem;
}

.el-carousel__indicators {
  transform: translateY(1rem);
}

.el-carousel__indicator--outside button {
  background-color: #ddd;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.el-carousel__indicator--outside.is-active button {
  background-color: #4CAF50;
}

/* News Section Styles */
.news-section {
  padding: 2rem 0;
  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
}

.section-title {
  font-size: 1.8em;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.carousel-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Carousel Card Styles */
.carousel-card {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-card.is-active {
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.8) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel-card:hover .card-overlay {
  opacity: 1;
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  color: #fff;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-card:hover .card-content {
  transform: translateY(0);
  opacity: 1;
}

.carousel-indicators {
  position: absolute;
  bottom: -2rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  width: 24px;
  border-radius: 4px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

/* Custom Element UI Carousel Styles */
.el-carousel__item {
  transition: all 0.4s ease;
}

.el-carousel__item--card.is-in-stage {
  transform: scaleY(0.95) translateZ(0);
  transition: all 0.4s ease;
}

.el-carousel__item--card.is-active {
  transform: scaleY(1) translateZ(0);
  animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50% { transform: translateY(-10px) translateZ(0); }
}

/* Content Section Layout */
.content-section {
  padding: 3rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

.section-grid {
  max-width: 1600px; /* 增加最大宽度 */
  width: 90%; /* 控制两侧留白 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 修改为等宽布局 */
  gap: 2rem;
  padding: 2rem;
}

/* Common Section Styles */
.section-title {
  font-size: 1.8em;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.section-title:hover::after {
  transform: scaleX(1);
}

/* News Section Styles */
.news-section {
  position: relative;
}

.carousel-container {
  position: relative;
  margin-top: 1rem;
}

.carousel-card {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-card.is-active {
  transform: translateY(-5px);
}

.img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.8) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel-card:hover .card-overlay {
  opacity: 1;
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  color: #fff;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-card:hover .card-content {
  transform: translateY(0);
  opacity: 1;
}

.carousel-indicators {
  position: absolute;
  bottom: -2rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.indicator {
  width: 30px;
  height: 3px;
  background: rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  width: 50px;
}

/* Announcement Section Styles */
.announcement-section {
  position: relative;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 300px;
  overflow-y: auto;
  padding-right: 1rem;
}

.announcement-list::-webkit-scrollbar {
  width: 4px;
}

.announcement-list::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 2px;
}

.announcement-list::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
  border-radius: 2px;
}

.notice-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.notice-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.notice-date {
  color: #64748b;
  font-size: 0.9em;
  white-space: nowrap;
}

.notice-content {
  overflow: hidden;
}

.notice-content h4 {
  color: #1e293b;
  margin: 0 0 0.5rem;
  font-size: 1.1em;
}

.notice-content p {
  color: #64748b;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.5;
}

.notice-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.notice-card:hover .notice-indicator {
  transform: scaleY(1);
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.el-carousel__item--card.is-active {
  animation: cardSlide 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardSlide {
  from {
    opacity: 0.6;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
